/* Стили для ProgressBar */
.styledProgressInput {
    --progress-height: 10px;
    --progress-color: rgb(177, 22, 224);
    --progress-bg-color: #2e2e2e;
  
    margin: 0;
    width: 100%;
    height: var(--progress-height);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: transparent;
    position: relative;
    overflow: hidden;
    transition: height 0.2s;
  
    background: linear-gradient(to right, var(--progress-color) var(--value), var(--progress-bg-color) var(--value));
  }
  
  .styledProgressInput:hover {
    --progress-height: 15px;
  }
  
  /* Стили для WebKit браузеров */
  .styledProgressInput::-webkit-slider-runnable-track {
    height: var(--progress-height);
    background: var(--progress-bg-color);
  }
  
  .styledProgressInput::-webkit-slider-thumb {
   --thumb-height: 1px;
      --thumb-width: 1px;
      position: relative;
      -webkit-appearance: none;
      width: var(--thumb-width, var(--thumb-height));
      box-shadow: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
        100vmax var(--progress-color);
  }
  
  /* Стили для Firefox */
  .styledProgressInput::-moz-range-track {
    background: var(--progress-bg-color);
    height: var(--progress-height);
  }
  
  .styledProgressInput::-moz-range-thumb {
    border: none;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: var(--progress-color);
  }

  .bar__player_progress {
    width: 100%;
    height: 12px;
    position: relative;
    /*background: #2e2e2e;*/
  }

  .bar__currentTime {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #696969;
    font-size: 18px;
  }